<template>
    <div class="tab-bar-item" @click="ly_skip">
      <div v-if="!isActive"><slot name="tab-bar-img"></slot></div>
      <div v-else><slot name="tab-bar-active"></slot></div>
      <div :style="isBackColor"><slot name="tab-bar-test"></slot></div>
    </div>
</template>

<script>

  export default {
    name: "TabBarItem",
    data(){
      return {

      };
    },
    props:{
      path:{
        type: String,
        default: '/home'
      },
      backColor:{
        type:String,
        default: '#FE6C88'
      }
    },
    methods:{
      ly_skip(){
        this.$router.push(this.path);
      }
    },
    computed:{
      isActive(){
        return this.$route.path.indexOf(this.path) !== -1;
      },
      isBackColor(){
        return this.isActive ? {color: this.backColor} : {};
      }
    },
    created() {

    }
  }
</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
  }
  .tab-bar .tab-bar-item img{
    width: 24px;
  }
</style>
